<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水平导航栏</title>
    <style>
        /**
          1. 去除列表的默认样式 - 重设li背景设置黄色
          2. 去除超链接的默认样式 - 超链接字体设置成#ccc
          3. ul默认会存在一个padding值
          4. 第一层的li - 水平排列=>float/width
          5. 第二层的ul - 默认是隐藏的
          6. 鼠标放在第一层的li/a , 对应的ul要显示
             让选中的li/a增加红色的背景,字体设置成白色
        **/
        ul{
            padding-left: 0;
        }
        .cc{
            float: left;
            list-style: none;
            padding-left: 0;
            margin: 0;
            /* display: block; */

            background-color:yellow;
            /* padding: 10px; */
        }
        a{
            text-decoration: none;
            /* color: #ccc; */
            color: black;
            /* font-size: 18px; */
        }
        a:hover{
            background-color: red;
            color: white;
        }
        .cc{
            font-size: 18px;
            margin-left: 180px;
            border-radius: 5px;
            padding: 10px;
            /* position: absolute; */
        }
        #id1{
            margin-left: 250px;
        }
        .cc:hover{
            box-shadow: 1px 1px 2px greenyellow;
        }
        .cc:hover ul{
            display: block;
            /* visibility: visible; */
            clear: both;
        }
        .cc ul{
            font-size: 16px;
            display: none;
            /* visibility: hidden; */
        }
        .cc li{
            display: block;
            clear: both;
        }
        #nav{
            box-sizing: border-box;
            width: 1550px;
            height: 170px;
            margin: auto;
            padding: 30px;
            border-radius: 7px;
            background-color:azure;
            box-shadow: 2px 1px 4px green;
            position: relative;
        }
    </style>
</head>
<body>
    <ul id="nav" style="border: 1px solid green;">
        <h1 style="float: left;">logo</h1>
        <li class="cc" id="id1"><a href="#">第一阶段</a>
            <ul>
                <li><a href="#">面向对象</a></li>
                <li><a href="#">多线程</a></li>
                <li><a href="#">集合框架</a></li>
                <li><a href="#">反射注解</a></li>
            </ul>
        </li>

        <li class="cc"><a href="#">第二阶段</a>
            <ul>
                <li><a href="#">MYSQL</a></li>
                <li><a href="#">JDBC</a></li>
                <li><a href="#">MYBATIS</a></li>
            </ul>
        </li>

        <li class="cc"><a href="#">第三阶段</a>
            <ul>
                <li><a href="#">HTML</a></li>
                <li><a href="#">CSS</a></li>
                <li><a href="#">JAVASCRIPT</a></li>
                <li><a href="#">BOOTSTRAP</a></li>
            </ul>
        </li>

        <li class="cc"><a href="#">第四阶段</a>
            <ul>
                <li><a href="#">SPRING</a></li>
                <li><a href="#">SPRINGBOOT</a></li>
                <li><a href="#">SPRINGCLOUD</a></li>
                <li><a href="#">REDIS</a></li>
            </ul>
        </li>
    </ul>
</body>
</html>